<template>
	<view class="content">
		<view class="block swiper-block">
			<Swiper1 :styleObj="{width: '100%',height: '400rpx',borderRadius: '0'}" :list="swiperList"></Swiper1>
		</view>
		<view v-if="info.viewMp3!=null&&info.viewMp3!=''&&tabActive==0" class="voice" @click="bjMusicClick"></view>
		<view v-if="info.viewMp3!=null&&info.viewMp3!=''&&tabActive==1" class="voiceT" @click="bjMusicClick"></view>
		<view hover-class="none" class="block info-block">
			<image mode="aspectFill" :src="info.picUrl" class="photo"></image>
			<view class="introduce-block">
				<view class="name">{{info.title}}</view>
				<view class="score">评分：{{info.score?info.score:''}}</view>
				<navigator class="static" :url="'/pages/attractions/note?id='+info.id"
					v-if="info.ticketList!=null&info.ticketList!=''">门票详情
				</navigator>

			</view>
		</view>
		<view class="evaluation-block">
			<view class="title">简介</view>
			<view class="info">
				<mp-html :content="info.introduce" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getViewById
	} from '@/api/attractions.js';
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				swiperList: [],
				id: null,
				info: [],
				musicShow: true,
				tabActive: 0
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getTicketList()

		},
		methods: {
			bjMusicClick: function() {
				if (this.musicShow) {

					console.log('播放')
					innerAudioContext.play();
					this.tabActive = 1;
				} else {
					console.log('暂停')
					innerAudioContext.pause();
					this.tabActive = 0;
				}
				this.musicShow = !this.musicShow;
			},
			getTicketList() {
				let id = this.id
				getViewById({
					id
				}).then((res) => {
					if (res.code == 1) {
						if (res.data != null) {
							this.info = res.data
							console.log(this.info)
							this.swiperList = res.data.viewAtlasList;
							innerAudioContext.autoplay = true;
							innerAudioContext.loop = true; //循环播放
							this.musicShow = false;
							innerAudioContext.src = this.info.viewMp3;
							innerAudioContext.pause();
						}
					} else {
						console.log(res)
					}
				}).catch((res) => {
					console.log(res)
				})
			}
		},
		onUnload() {
			innerAudioContext.pause();
			innerAudioContext.destroy();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		background: #F4F4F4;
		min-height: 100vh;

		.block.swiper-block {
			width: 100%;

		}

		.voice {
			display: flex;
			padding: 6rpx 0 0 16rpx;
			color: #fff;
			position: absolute;
			font-size: 28rpx;
			top: 24%;
			left: 80%;
			width: 100rpx;
			height: 100rpx;
			background: url('https://ysz.gshwsc.com/api/file/img/20220928223712.png') no-repeat center;
			background-size: 100% 100%;
		}

		.voiceT {
			background: url('https://ysz.gshwsc.com/api/file/img/20220928223723.png') no-repeat center;
			display: flex;
			padding: 6rpx 0 0 16rpx;
			color: #fff;
			position: absolute;
			font-size: 28rpx;
			top: 24%;
			left: 80%;
			width: 100rpx;
			height: 100rpx;
			background-size: 100% 100%;
		}


		.block.info-block {
			display: flex;
			flex-direction: row;
			width: 100%;
			background: #fff;
			padding: 30rpx;
			// margin-top: -40rpx;

			.photo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}

			.introduce-block {
				width: calc(100% - 200rpx);
				display: flex;
				flex-direction: column;

				.name {
					font-size: 36rpx;
					margin-bottom: 10rpx;
					font-weight: bold;
				}

				.score {
					flex-grow: 0;
					font-size: 28rpx;
					//font-weight: bold;
					margin-right: 14rpx;
					margin-top: 20rpx;
				}

				.static {
					color: #0066FF;
					font-size: 22rpx;
					margin-top: 24rpx;
				}

				// .introduce {
				// 	font-size: 26rpx;
				// 	color: $color-regular-text;
				// }

				// .introduce.fold {
				// 	display: -webkit-box;
				// 	-webkit-box-orient: vertical;
				// 	-webkit-line-clamp: 2;
				// 	overflow: hidden;
				// }

				// .fold-btn {
				// 	font-size: 28rpx;
				// 	color: $color-primary;
				// 	margin-top: 10rpx;
				// }
			}
		}

		.padding-block {
			padding: 30rpx;
		}

		.block.date-block {
			padding-bottom: 0;
			display: flex;
			flex-direction: row;
			border-radius: 40rpx;
			box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.08);
			position: relative;

			.date-item {
				flex-grow: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				background: #fff;
				padding: 30rpx 0;

				.date {
					font-weight: bold;
					font-size: 28rpx;
					margin-right: 10rpx;
				}

				.date.more {
					font-weight: normal;
				}

				.name {
					font-size: 28rpx;
					color: $color-secondary-text;
				}
			}

			.date-item:first-child {
				border-radius: 50rpx 0 0 50rpx;
			}

			.date-item:last-child {
				border-radius: 0 50rpx 50rpx 0;
			}

			.date-item.active {
				background: $color-primary;
				color: #fff;

				.name {
					color: #fff;
				}
			}
		}

		.block.tickets-block {
			display: flex;
			flex-direction: column;
			margin-top: -40rpx;

			.tickets-item {
				width: 100%;
				background: #fff;
				border-bottom: 1px solid #efefef;
				padding: 30rpx;
				padding-top: 70rpx;
				display: flex;
				flex-direction: row;

				.photo {
					width: 250rpx;
					height: 250rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.info-block {
					width: calc(100% - 270rpx);
					display: flex;
					flex-direction: column;
					position: relative;

					.name {
						font-size: 34rpx;
					}

					.label-block {
						width: 100%;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						margin: 10rpx 0;

						.label-item {
							font-size: 24rpx;
							color: $color-primary;
							background: rgba(64, 158, 255, .1);
							padding: 4rpx 6rpx;
							margin-right: 10rpx;
							border-radius: 6rpx;
							margin-bottom: 10rpx;
						}
					}

					.describe {
						font-size: 28rpx;
						color: $color-secondary-text;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.price {
						margin-top: 16rpx;
						color: $color-danger;
						font-weight: bold;
					}

					.btn {
						position: absolute;
						width: 160rpx;
						height: 60rpx;
						font-size: 26rpx;
						bottom: -10rpx;
						right: -10rpx;
					}
				}

			}
		}

		.evaluation-block {
			display: flex;
			flex-direction: column;
			margin: 20rpx 0;
			background: #fff;
			padding: 30rpx 20rpx;
			padding-bottom: 0;

			.title {
				font-weight: bold;
			}

			.info {
				line-height: 1.8;
				font-size: 30rpx;
				margin: 0 10rpx;
			}
		}
	}
</style>
